<template>
    <Carousel />
    <Search />
    <!-- 底部展示 -->
    <el-row :gutter="20">
        <el-col :span="20">
            <Level @getLevel="getLevel" />
            <Region @getRegion="getRegion"/>
            <div class="hospital" v-if="hospitalArr.length > 0">
                <Card class="item" v-for="(item, index) in hospitalArr" :key="index" :hospitalInfo="item" />
            </div>
            <el-empty v-else description="暂无数据" />
            <el-pagination
                v-model:current-page="pageNo"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 40]"
                :background="true"
                layout="prev, pager, next, jumper, sizes, total"
                :total="total"
                @current-change="currentChange"
                @size-change="sizeChange"
            />
        </el-col>
        <el-col :span="4">
            
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import Carousel from './carousel/index.vue';
import Search from './search/index.vue';
import Level from './level/index.vue';
import Region from './region/index.vue';
import Card from './card/index.vue';

//分页器所需要的数据
import { onMounted ,ref, watch } from 'vue';
import { reqHospital } from '@/api/home';
import type { Content, HospitalResponseData } from '@/api/home/type';

let pageNo = ref<number>(1);
let pageSize = ref<number>(10);

let hospitalArr = ref<Content>([]);
let total = ref<number>(10);
let hostype = ref<string>('');
let districtCode = ref<string>('');

const getHospitalData = async ()=>{
   let result:HospitalResponseData = await reqHospital(pageNo.value, pageSize.value, hostype.value, districtCode.value);
   console.log(result);
   
   if (result.code === 200){
        hospitalArr.value = result.data.content;
        total.value = result.data.totalElements;
   }
}

const currentChange = async () => {
    getHospitalData();
}

const sizeChange = async () => {
    pageNo.value = 1;
    getHospitalData();
}

const getLevel = (level:string) => {
    hostype.value = level;
}

const getRegion = (region:string) => {
    districtCode.value = region;
}

watch([hostype, districtCode], ()=> {
    getHospitalData();
})

onMounted(()=>{
    getHospitalData();
})

</script>

<style scoped lang="scss">
.hospital{
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
</style>